import { Box, Button, TextInput, Icon, ButtonGroup, Modal } from '@rocket.chat/fuselage';
import React, { FC, useCallback, useEffect, useRef } from 'react';

import { useTranslation } from '../../../contexts/TranslationContext';
import { useForm } from '../../../hooks/useForm';

type VerifyCodeModalProps = {
	onVerify: (code: string) => void;
	onCancel: () => void;
};

const VerifyCodeModal: FC<VerifyCodeModalProps> = ({ onVerify, onCancel, ...props }) => {
	const t = useTranslation();

	const ref = useRef<HTMLInputElement>();

	useEffect(() => {
		if (typeof ref?.current?.focus === 'function') {
			ref.current.focus();
		}
	}, [ref]);

	const { values, handlers } = useForm({ code: '' });

	const { code } = values as { code: string };
	const { handleCode } = handlers;

	const handleVerify = useCallback(
		(e) => {
			if (e.type === 'click' || (e.type === 'keydown' && e.keyCode === 13)) {
				onVerify(code);
			}
		},
		[code, onVerify],
	);

	return (
		<Modal {...props}>
			<Modal.Header>
				<Icon name='info' size={20} />
				<Modal.Title>{t('Two-factor_authentication')}</Modal.Title>
				<Modal.Close onClick={onCancel} />
			</Modal.Header>
			<Modal.Content fontScale='p1'>
				<Box mbe='x8'>{t('Open_your_authentication_app_and_enter_the_code')}</Box>
				<Box display='flex' alignItems='stretch'>
					<TextInput
						ref={ref}
						placeholder={t('Enter_authentication_code')}
						value={code}
						onChange={handleCode}
						onKeyDown={handleVerify}
					/>
				</Box>
			</Modal.Content>
			<Modal.Footer>
				<ButtonGroup align='end'>
					<Button onClick={onCancel}>{t('Cancel')}</Button>
					<Button primary onClick={handleVerify}>
						{t('Verify')}
					</Button>
				</ButtonGroup>
			</Modal.Footer>
		</Modal>
	);
};

export default VerifyCodeModal;
